<!DOCTYPE html>
<html lang="zh_CN">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>统计</title>
  <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
  <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css">
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid ew-console-wrapper">
  <!-- 统计图表 -->
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md4 layui-col-sm6">
      <div class="layui-card" style="overflow: hidden;">
        <div class="layui-card-header">问卷统计</div>
        <div class="layui-card-body">
          <div id="consoleCharts" style="height: 300px;"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- js部分 -->
<script src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script src="${ctxPath}/assets/js/common.js"></script>
<script src="${ctxPath}/assets/libs/echarts/echarts.min.js"></script>
<script src="${ctxPath}/assets/libs/echarts/china.js"></script>
<script src="${ctxPath}/assets/libs/echarts/echarts-wordcloud.min.js"></script>
<script>
  layui.use(['layer', 'admin','xmSelect'], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var admin = layui.admin;

    //调查问卷统计
    getSuveryQuestion();
    /** 渲染日统计图表 */
    var myCharts1 = echarts.init(document.getElementById('consoleCharts'));
    var options1 = {
      tooltip: {},
      legend: {},
      xAxis: {
        name: '名称',
        nameTextStyle: {color: '#595959'},
        type: 'category',
        axisLabel: {
          rotate: 15,
          margin: 5
        }
      },
      yAxis: {
        name: '人数',
        type: 'value'
      },
      series: [
        {
          type: 'bar',
        },
        {
          type: 'bar',
        },
        {
          type: 'bar',
        },
        {
          type: 'bar',
        }],
      dataZoom: [{
        height: '14',
        type: 'slider',
        state: 0,
        end: 100
      }]
    };
    myCharts1.setOption(options1);

    function getSuveryQuestion() {
      admin.req(getProjectUrl() + 'smallquestio/orgStatic', function (res) {
        debugger;
        // 饼状图赋值
        myCharts1.setOption({
          dataset: {
            source: res.data
          }
        })
      });
    }
    myCharts1.on('click', function (params) {
      // 检查点击的是否是柱子
      if (params.componentType === 'series' && params.seriesType === 'bar') {
        debugger;
        // 获取点击的柱子的数据值和名字,学期、科目
        var testPaperId = params.data[5];
        questionInfo(testPaperId);

      }
    });
    function questionInfo(testPaperId){
      top.layer.open({
        type: 2,
        title: '问卷统计',
        content: getProjectUrl() + 'sysQuestionnaire/statistics?testpaperId='+testPaperId,
        area: ['1000px', '600px'],
        shadeClose: true,
        zIndex:2000
      });
    }
    /** 窗口大小改变事件 */
    window.onresize = function () {
      myCharts1.resize();
    };

  });
</script>
</body>
</html>
